/**
* @Author:marina
* @Date: 2025-02-12 09:54:35
* @Description: svg+css实现操作成功打对号动画效果代码
*/

<script setup lang="ts">
defineProps({
    // 宽度
    _width: {
        type: String,
        required: true,
        default: '3em'
    },
    // 高度
    _height:{
        type: String,
        required: true,
        default: 'auto'
    }
});
</script>


<template>
    <div class="dynamicArrow">
        <svg
            class="spinner"
            :style="{ width: `${_width}`, height: `${_height}` }"
            viewBox="0 0 48 48"
            role="img"
            aria-label="A partial ring that rotates and then is shaped as a checkmark, which pops out yielding confetti"
        >
            <g
                fill="none"
                stroke="currentcolor"
                stroke-linecap="round"
                stroke-width="4"
            >
                <circle
                    class="spinner__worm"
                    cx="24"
                    cy="24"
                    r="22"
                    stroke-dasharray="138.23 138.23"
                    stroke-dashoffset="-51.84"
                    transform="rotate(-119)"
                />
                <circle
                    class="spinner__pop-end"
                    stroke="var(--light-green)"
                    cx="24"
                    cy="24"
                    r="18"
                    opacity="0"
                />
                <g
                    fill="currentcolor"
                    stroke="none"
                >
                    <circle
                        class="spinner__pop-start"
                        fill="var(--light-green)"
                        cx="24"
                        cy="24"
                        r="20"
                        opacity="0"
                    />
                    <g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--periwinkle)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-blue)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(51.43,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--orange)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--magenta)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(102.86,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-green)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-teal)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(154.29,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--purple)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--magenta)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(205.71,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-teal)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-blue)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(257.14,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--periwinkle)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-blue)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                    <g transform="rotate(308.57,24,24)">
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--purple)"
                                cx="22"
                                cy="5"
                                r="1.5"
                            />
                        </g>
                        <g
                            class="spinner__pop-dot-group"
                            opacity="0"
                        >
                            <circle
                                class="spinner__pop-dot"
                                fill="var(--light-teal)"
                                cx="26"
                                cy="2"
                                r="1.5"
                            />
                        </g>
                    </g>
                </g>
                <path
                    class="spinner__check"
                    d="M 17 25 L 22 30 C 22 30 32.2 19.8 37.3 14.7 C 41.8 10.2 39 7.9 39 7.9"
                    stroke-dasharray="36.7 36.7"
                    stroke-dashoffset="-36.7"
                />
            </g>
        </svg>
    </div>
</template>


<style scoped lang='less'>
.dynamicArrow {
    --hue: 223;
    --sat: 10%;
    --bg: transparent;
    --fg: hsl(var(--hue), var(--sat), 10%);
    --hue-success: 126;
    --success1: hsl(var(--hue-success), 90%, 40%);
    --success2: hsl(var(--hue-success), 90%, 24%);
    --periwinkle: hsl(240, 90%, 70%);
    --light-blue: hsl(210, 90%, 70%);
    --orange: hsl(15, 90%, 70%);
    --magenta: hsl(300, 90%, 70%);
    --light-green: hsl(105, 40%, 70%);
    --light-teal: hsl(150, 40%, 70%);
    --purple: hsl(270, 90%, 70%);
    --trans-dur: 0.3s;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);


    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--fg);
    display: flex;
    font: 1em/1.5 sans-serif;
    height: auto;
    width: auto;
    transition: background-color var(--trans-dur), color var(--trans-dur);


    .spinner {
        color: var(--success2);
        overflow: visible;
        margin: auto;
        // width: 3em;
        // height: auto;
        transition: color var(--trans-dur);
    }

    .spinner circle,
    .spinner g,
    .spinner path {
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }

    .spinner__check,
    .spinner__pop-start,
    .spinner__worm {
        transform-origin: 24px 24px;
    }

    .spinner__check {
        animation-name: check;
    }

    .spinner__pop-dot {
        animation-name: pop-dot;
    }

    .spinner__pop-dot-group {
        animation-name: pop-dot-group1;
    }

    .spinner__pop-dot-group+.spinner__pop-dot-group {
        animation-name: pop-dot-group2;
    }

    .spinner__pop-end {
        animation-name: pop-end;
    }

    .spinner__pop-start {
        animation-name: pop-start;
    }

    .spinner__worm {
        animation-name: worm;
    }

    /* Animations */
    @keyframes check {

        from,
        64% {
            stroke-dashoffset: -36.7;
            transform: scale(1);
        }

        75%,
        77% {
            animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
            stroke-dashoffset: 13.7;
            transform: scale(1);
        }

        79% {
            animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
            stroke-dashoffset: 13.7;
            transform: scale(0.4);
        }

        87% {
            animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
            stroke-dashoffset: 13.7;
            transform: scale(1.4);
        }

        93%,
        to {
            stroke-dashoffset: 13.7;
            transform: scale(1);
        }
    }

    @keyframes pop-dot {

        from,
        80% {
            animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
            transform: translate(0, 6px);
        }

        90%,
        to {
            transform: translate(0, 0);
        }
    }

    @keyframes pop-dot-group1 {

        from,
        82.5%,
        90%,
        to {
            opacity: 0;
        }

        85%,
        87.5% {
            opacity: 1;
        }
    }

    @keyframes pop-dot-group2 {

        from,
        82.5%,
        to {
            opacity: 0;
        }

        85%,
        90% {
            opacity: 1;
        }
    }

    @keyframes pop-end {
        from {
            animation-timing-function: steps(1, end);
            opacity: 0;
            r: 18px;
            stroke-width: 4px;
        }

        82.5% {
            animation-timing-function: linear;
            opacity: 1;
            r: 18px;
            stroke-width: 4px;
        }

        84%,
        to {
            opacity: 0;
            r: 19px;
            stroke-width: 3px;
        }
    }

    @keyframes pop-start {
        from {
            animation-timing-function: steps(1, end);
            opacity: 0;
            transform: scale(0.35);
        }

        76% {
            animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
            opacity: 1;
            transform: scale(0.35);
        }

        82.5% {
            animation-timing-function: steps(1, start);
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(1);
        }
    }

    @keyframes worm {
        from {
            stroke-dashoffset: -51.84;
            transform: rotate(-119deg);
        }

        60% {
            stroke-dashoffset: -51.84;
            transform: rotate(961deg);
        }

        64% {
            animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
            stroke-dashoffset: -51.84;
            transform: rotate(1033deg);
        }

        72.5%,
        to {
            stroke-dashoffset: -138.23;
            transform: rotate(1033deg);
        }
    }
}
</style>